<!DOCTYPE HTML>
<!--
	Hyperspace by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>上传图片 - XYZ博客</title>
  <meta charset="utf-8" />
  <meta name="keywords" content="XYZ博客,图库,上传图片" />
  <meta name="description" content="XYZ博客图库进行图片上传。" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="/blogs/assets/css/main.css" />
  <noscript><link rel="stylesheet" href="/blogs/assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">

<!-- Header -->
<header id="header">
  <a href="/" class="title">XYZ博客</a>
  <nav>
    <ul>
      <li><a href="/">主页</a></li>
      <li><a href="/image/imageAddPage" class="active">上传图片</a></li>
      <li><a href="javascript:void(0)" id="loginOut">安全退出</a></li>
    </ul>
  </nav>
</header>

<!-- Wrapper -->
<div id="wrapper">

  <!-- Main -->
  <section id="main" class="wrapper">
    <div class="inner">
      <h1 class="major">上传图片</h1>
      <span class="image fit"><img src="/blogs/images/personal.jpg" alt="林书豪" /></span>
      <div class="split style1">
        <section>
          <p id="vCodeStatus"></p>
          <p id="url"></p>
          <div>
            <div>
              <form action="" method="post" enctype="multipart/form-data">
                <input type="file" name="file" id="file">
              </form>
            </div>
            <div>
              <a id="uploadFile" class="button icon solid fa-upload" href="javascript:void(0)">上传图片</a>
            </div>
            <div >
              <br />
              使用空间量：<span th:text="${size}"></span>
            </div>
          </div>
        </section>
        <section>
          <ul class="contact">
            <li>
              <h3>图库</h3>
              <span>
                <a href="/image/imagePage">返回图库</a><br />
              </span>
            </li>
            <li>
              <h3>文章</h3>
              <a href="/article/newArticlePage">文章发表</a><br />
            </li>
            <li>
              <h3>系统管理</h3>
              <a href="/pear/index.html">进入管理系统</a><br />
            </li>
          </ul>
        </section>
      </div>
    </div>
  </section>

</div>

<!-- Footer -->
<footer id="footer" class="wrapper alt">
  <div class="inner">
    <ul class="menu">
      <li>&copy; XYZ博客. All rights reserved.</li><li>个人网站 2021 ~ 2029年</li>
      <li><a href="https://gitee.com/zhang-sir15/projects" target="_blank" >gitee</a></li></li>
    </ul>
  </div>
</footer>

<!-- Scripts -->
<script src="/blogs/assets/js/jquery.min.js"></script>
<script src="/blogs/assets/js/jquery.scrollex.min.js"></script>
<script src="/blogs/assets/js/jquery.scrolly.min.js"></script>
<script src="/blogs/assets/js/browser.min.js"></script>
<script src="/blogs/assets/js/breakpoints.min.js"></script>
<script src="/blogs/assets/js/util.js"></script>
<script src="/blogs/assets/js/main.js"></script>

<script>
  $(function() {
    // 退出登录
    $("#loginOut").click(function() {
      $.ajax({
        url: "/user/loginOut",
        async: true,
        type: "POST",
        success: function(data) {
          if (data.code == 200) {
            $("#vCodeStatus").html("用户安全退出，3秒后为你跳转到首页。");
            setTimeout(function() {
              window.location.href = "/";
            }, 3000);
          } else {
            $("#vCodeStatus").html(data.message);
          }
        }
      })
    })

    // 上传图片
    $("#uploadFile").click(function() {
      // 使用jQuery发起上传文件请求
      var files = $('#file')[0].files;
      if (files.length <= 0) {
        return $("#vCodeStatus").html('请选择文件后再上传！');
      }
      var fd = new FormData();
      fd.append('file', files[0]);
      $.ajax({
        type: 'post',
        url: '/minio/upload/wangEditor',
        data: fd,
        processData: false,
        contentType: false,
        success: function(data) {
          $("#vCodeStatus").html(data.message);
          var currentProtocolAndDomain = window.location.origin;
          $("#url").html("图片地址：" + currentProtocolAndDomain + data.data.url);
        }
      })
    })
  })
</script>
</body>
</html>